<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>链接的提示效果</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<style type="text/css">
    #tooltip {
        border: 1px solid #CCCCCC;
        position: absolute;
        background: #ABD9F5;
        border-radius: 2px;
        color: red;
    }

    ul li {
        list-style-type: none;
        float: left;
    }

    img {
        width: 150px;
        height: 150px;
        border: 1px solid #CCCCCC;
    }
</style>
<script type="text/javascript">
$(function() {
    $('a').mouseover(function(e) {
        var x = 10;
        var y = 20;
        this.Title = this.title;
        //清空默认的title
        this.title = '';
        var img = $(this).find('img').attr('src');
        var imgTitle = this.Title ? "<br/>"+this.Title : '';

        //创建div元素并添加
        var div = '<div id="tooltip"><img src='+img+' alt="产品预览图" />'+imgTitle+'</div>';
        $('body').append(div);

        //设置div的位置
        $('#tooltip').css({
            'top' : (e.pageY+y) + 'px',
            'left' : (e.pageX+x) + 'px'
        }).show('fast');

    }).mouseout(function() {
        $('#tooltip').remove();
        this.title = this.Title;

    }).mousemove(function(e) {
        $('#tooltip').css({
            'top' : (e.pageY+25) + 'px',
            'left' : (e.pageX+25) + 'px'
        });
    })
});
</script>
</head>
<body>
<ul>
    <li><a href="javascript void(0)" title="黑莓"><img src="./images/heimei.jpg" alt="黑莓"></a></li>
    <li><a href="javascript void(0)" title="诺基亚"><img src="./images/nokia.jpg" alt="诺基亚"></a></li>
    <li><a href="javascript void(0)" title="索尼"><img src="./images/sony.jpg" alt="索尼"></a></li>
    <li><a href="javascript void(0)" title="华为"><img src="./images/huawei.jpg" alt="华为"></a></li>
</ul>
</body>
</html>
